<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref, onBeforeMount} from "vue";
import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"
// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);


const online_list1 = ref([
    {
      id: "1",
      title: '助力全球展业',
      subTitle: "解锁超过60种全球最受欢迎的支付方式，轻松实现全球收款。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-earth.5e6d203c.svg'
    },
    { 
      id: "2",
      title: '一站式集成服务',
      subTitle: "灵活适配各类设备、提供快捷结算，提升您的支付管理效率。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-integration.4ce5bdf5.svg'
    },
    { 
      id: "3",
      title: '为营收护航',
      subTitle: "搭载行业领先的蚂蚁风控科技和收入增长引擎，帮您在支付环节降本增效。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-escort.fb26f7a0.svg'
    }
 ])

 const pay_list = ref([
    {
      id: 1,
      title: '电子钱包',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*EsWMS5EnjdEAAAAAAAAAAAAADmesAQ/fmt.webp'
    },
    { 
      id: 2,
      title: '在线网银',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*l3UtRLZB8zIAAAAAAAAAAAAADmesAQ/fmt.webp'
    },
    { 
      id: 3,
      title: '银行卡',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*62f2QLWkrL8AAAAAAAAAAAAADmesAQ/fmt.webp'
    },
    { 
      id: 4,
      title: '柜台支付',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*2FqQQrujwSIAAAAAAAAAAAAADmesAQ/fmt.webp'
    },
    { 
      id: 5,
      title: '国家网关',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*fsElSYqy7HYAAAAAAAAAAAAADmesAQ/fmt.webp'
    },
 ])

 const groupSelected = ref(2)
 const changeSelectedClick = (type: String) => {
  console.log(groupSelected)
  const limitNumber = pay_list.value.length - 2
    if(type == 'prev') {
      if(groupSelected.value == 1) return
      if(groupSelected.value > limitNumber) {
        groupSelected.value = limitNumber
      }
      groupSelected.value = groupSelected.value - 1
    }
    if(type == 'next') {
      if(groupSelected.value > pay_list.value.length)return
      if(groupSelected.value < limitNumber) {
        groupSelected.value = limitNumber
      }
      groupSelected.value += 1
    }
 }

 const multiport_list = ref([
    {
      id: "1",
      title: '手机',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-mobile.2787f257.svg'
    },
    { 
      id: "2",
      title: 'PC和平板',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-pc.f325d1fc.svg'
    },
    { 
      id: "3",
      title: '电视',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-tv.758e2233.svg'
    },
 ])

 const integration_list = ref([
 {
      id: "1",
      title: 'API模式',
      subTitle: '100%定制化的收银台方案，收银样式完全由您决定。',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-api.a2491b4d.svg'
    },
    { 
      id: "2",
      title: 'SDK模式',
      subTitle: '在我们提供的收银台模块基础上，灵活调试页面风格，适配您的业务需求。',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-sdk.38c81779.svg'
    },
 ])

/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};

const learnMoreClick = (href: any) => {
  window.open(href, '_blank')
}

onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();
})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

const carousel_Images = computed(() => {
  return [
    {
        headImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original&quot',
        subImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*UZ3wSLYXAcYAAAAAAAAAAAAADmesAQ/fmt.webp'
    }
  ]
})

</script>

<template>
  <v-app>
    <!-- 主图-->
    <banner-main
      :lists_bottom="online_list1"
      :lists="carousel_Images"
      title="线上收银台" 
      subTitle="选择适合您的集成模式搭建即时支付产品，便捷地接收来自全球消费者的线上付款。"
     ></banner-main>

    <!-- 全面支付方式 -->
     <div class="w-full bg-[#001966] mt-40">
        <div class="text-center text-white pt-20">
            <div class="text-2xl font-bold">全面的支付方式</div>
            <div class="mt-10 mb-10">
                <span class=" text-2xl">支持国际主流和本地常用的支付方式，让顾客用他们熟悉的方式支付。</span>
                <div class="pay mt-10">
                    <span class="cursor-pointer">查看支付方式</span>
                    <i class="fa-solid fa-angle-right"></i>
                </div>
            </div>
        </div>
        <div class="d-flex justify-center mb-10">
            <div class="w-[55px] h-[55px] d-flex justify-center align-center rounded-[50%] bg-[#fff] overflow-hidden cursor-pointer mr-10" @click="changeSelectedClick('prev')">
              <i class="text-[#1677ff] text-[22px] fa-solid fa-arrow-left-long"></i>
            </div>
            <div class="w-[55px] h-[55px] d-flex justify-center align-center rounded-[50%] bg-[#fff] overflow-hidden cursor-pointer" @click="changeSelectedClick('next')">
              <i class="text-[#1677ff] text-[22px] fa-solid fa-arrow-right-long"></i>
            </div>
        </div>
        <div
            class="mx-auto w-10/12 float-right"
            elevation="8"
            max-width="w-9/12"
        >
            <v-slide-group
            v-model="groupSelected"
            ref="slideGroup"
            class="pa-4"
            selected-class="bg-success"
            show-arrows
            >
            <v-slide-group-item
                v-for="(p,index) in pay_list"
                :key="p.id"
                :value="p.id"
            >
                <div class="h-min mr-40">
                    <div class="text-[#fff] text-[24px] mb-8">{{ p.title }}</div>
                    <v-img cover width="448px" :src="p.src"/>
                </div>
                <!-- <v-card
                width="448"
                class="h-min mr-40 "
                >
                    <span>{{ p.title }}</span>
                    <div>
                        <v-img cover width="448px" :src="p.src"/>
                    </div>
                </v-card> -->
            </v-slide-group-item>
            </v-slide-group>
        </div>
     </div>

     <div class="w-full text-center pt-40 ">
        <div class="mx-auto w-9/12 d-flex flex-column justify-center align-center">
          <span class="font-semibold text-3xl mb-10">多端可用</span>
          <span class="text-2xl text-[#566175]">打破终端的边界，线上收银台兼容手机、电脑、平板、电视等多类终端，随时随地提供优质的支付体验。</span>
        </div>
    </div>
    <div class="mx-auto d-flex justify-between w-9/12 my-40">
        <div 
          v-for="bl in multiport_list"
          :key="bl.id"
          class="bg-white d-flex justify-center align-center rounded-3xl"
        >
          <div class="w-3/12 bg-gray-50 d-flex flex-column justify-center align-center h-[48    0px] w-[440px] text-center px-10 py-20">
            <div>
                <v-img width="280px" height="280px" cover :src="bl.src"/>
            </div>
            <span class="font-semibold text-3xl mt-20">{{ bl.title }}</span>
          </div>
        </div>
    </div>

    <div class="w-full text-center pt-40 ">
        <div class="mx-auto w-9/12 d-flex flex-column justify-center align-center">
          <span class="font-semibold text-3xl mb-10">灵活集成</span>
          <span class="text-2xl text-[#566175]">选择最适合您的集成方式启用我们的支付接口。</span>
        </div>
    </div>
    <div class="mx-auto d-flex justify-center w-9/12 my-40">
        <div 
          v-for="bl in integration_list"
          :key="bl.id"
          class="bg-white d-flex justify-center align-center"
        >
          <div class="first:mr-10 w-3/12 bg-gray-50 d-flex flex-column justify-center align-center h-[550px] w-[440px] text-center pt-20 px-10 pb-56  rounded-3xl overflow-hidden">
            <div>
                <v-img width="200px" height="200px" cover :src="bl.src"/>
            </div>
            <span class="font-semibold text-3xl mt-10">{{ bl.title }}</span>
            <span class="text-xl mt-4 text-[rgba(0,0,0,0.6)]">{{ bl.subTitle }}</span>
          </div>
        </div>
    </div>
    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>
    :deep(.v-slide-group__prev) {
        display: none;
    }
    :deep(.v-slide-group__next) {
        display: none;
    }

    .pay:hover .fa-angle-right {
        @apply transform transition-transform duration-300 translate-x-1;
    }

</style>